<script setup lang="ts">
defineOptions({
  name: "selectDetector"
});

import { ref, onMounted } from "vue";
import { queryDetectorLedgerList } from "@/api/modules/operation";
import { useTableCloumns, useSearchOption } from "../../ledgerManage/hooks";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { cloneDeep } from "@pureadmin/utils";

const detectorChecklistDTOList = defineModel({ type: Array, default: () => [] });
const dialogVisible = defineModel("visible", { type: Boolean, default: false });
const commonSearchRef = ref<InstanceType<typeof commonSearch>>(null);
const commonTableRef = ref<InstanceType<typeof commonTable>>(null);
const scrollbarHeight = 360;
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption(true));
const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(true));
const loading = ref<boolean>(true);

const params = ref<any>({});
let defaultParams: any = {
  // 1：在供，2：返库，3：过期
  lifeCycle: ""
};
let currentParams: any = {};

const emits = defineEmits(["submit"]);

const getRowKey = row => {
  return row.detectorCode;
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 4) {
    style["text-align"] = "center";
  }
  return style;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const resetSearchFormHandler = () => {
  currentParams = {};
  updateParams();
};

const selectionChangeHandler = (val: Array<any>) => {
  detectorChecklistDTOList.value = cloneDeep(val);
};

const cancelHandler = () => {
  dialogVisible.value = false;
};

const submitHandler = () => {
  emits("submit", cloneDeep(detectorChecklistDTOList.value));
  cancelHandler();
};

const init = () => {};

onMounted(() => {
  init();
});
</script>

<template>
  <px-dialog v-model="dialogVisible" title="选择侦测器" width="1200px">
    <div v-loading="loading" class="select-detector">
      <div class="select-detector-search">
        <commonSearch
          v-if="searchOption?.length"
          ref="commonSearchRef"
          :row-num="4"
          :option="searchOption"
          :operation-span="3"
          @submit="submitSearchFormHandler"
          @reset="resetSearchFormHandler"
        />
      </div>
      <div ref="tableContentRef" class="select-detector-table">
        <commonTable
          ref="commonTableRef"
          v-model:loading="loading"
          selection
          :tableCloumns="tableCloumns"
          :height="scrollbarHeight"
          :row-key="getRowKey"
          :header-cell-style="headerCellStyleFn"
          :axiosApi="queryDetectorLedgerList"
          :params="params"
          @selection-change="selectionChangeHandler"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancelHandler">取消</px-button>
        <px-button type="primary" @click="submitHandler">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
.select-detector {
  .select-detector-table {
    margin-top: 16px;
  }
}
</style>
